import { DownOutlined } from '@ant-design/icons';
import { Tree, Space, Modal,message } from 'antd';
import { getDepartmentList } from '@/api/department'
import { useEffect, useState } from 'react';
import { listToTree } from '@/utils/index'
import Mydropdown from './components/Mydropdown.js';
import AddDept from './components/AddDept.js';
import { delDept } from '@/api/department'

const openrateArr = [
  {
    key: 1,
    label: '添加子部门',
  },{
    key: 2,
    label: '编辑部门',
  },{
    key: 3,
    label: '删除',
  },
]
export default function Department(){
  const [treeData, setTreeData] = useState([])
  const [dialogVisible, setDialogVisible] = useState(false)
  const [title, setTitle] = useState('')
  const [ formData, setFormData] = useState({})
  
    useEffect(()=>{
      const list = sessionStorage.getItem('departmentList')
      if(list){
        setTreeData(JSON.parse(list))
      }else{
        getList()
      }
    },[])
    async function getList(){
      try {
        const res = await getDepartmentList()
        let treeData = listToTree(res, 0)
        sessionStorage.setItem('departmentList', JSON.stringify(treeData))
        setTreeData([...treeData])
      } catch (error) {
        console.log(error)
      }
    }
    function onClose(){
      setDialogVisible(false)
    }
    return <div style={{
        backgroundColor: '#fff',
        padding: '30px 140px'
    }}>
       { treeData?.length>0?<Tree
      showLine
      switcherIcon={<DownOutlined />}
      defaultExpandedKeys={['0-0-0']}
      treeData={treeData}
      blockNode 
      defaultExpandAll={true}
      autoExpandParent
      titleRender={(nodeData)=>{
        // console.log(nodeData)
        return <div style={{
            display: 'flex',
            justifyContent: 'space-between',
        }}>
          <span>{nodeData.title}</span>
          <div>
            <span style={{marginRight: '20px'}}>{ nodeData.managerName }</span>     
            <Mydropdown menu={ openrateArr } onOperate={(val)=>{
              if(val.key != 3){
                setTitle(val.label)
                setFormData({...nodeData})
                setDialogVisible(true)
              }else {
                // 删除部门
                console.log('删除部门')
                Modal.confirm({
                  title: '警告',
                  content: '确定删除吗？',
                  okText: '确定',
                  cancelText: '取消',
                  async onOk(){
                    try {
                      await delDept(nodeData.id)
                      await getList()
                    } catch (error) {}
                  },
                  onCancel(){
                    message.warning('取消删除')
                  }
                })

              }
            }}>
              <Space>
                操作
                    <DownOutlined />
                </Space>
            </Mydropdown>
          </div>
        </div>
      }}
    />:null}
    <AddDept formData={formData} title={title} dialogVisible={dialogVisible} close={onClose}
    refreshList={()=>{
      getList()
    }}></AddDept>
    </div>
}